<template name="index">
	<view class="main">
		<!-- 搜索 -->
		<view class="search_main">
			<view @click="focusSearch()" class="search">
				<uni-icons slot="searchIcon" color="#999999" size="18" type="search" style="margin-top: 5rpx;" />
				<text style="margin-left: 30rpx;line-height: 50rpx;">青春期的烦恼</text>
			</view>
			<uni-icons slot="searchIcon" color="#999999" size="18" type="scan" class="scan" />
		</view>

		<!-- 轮播 -->
		<view class="background_img" :style="{backgroundImage:'url(' + banner + ')'}">
		</view>
		 <swiper class="swiper"  :autoplay="true" :interval="3000" :duration="500">
		                        <swiper-item v-for="item in banner">
		                           <image style="width:100%;" :src="item.imageUrl"></image>
		                        </swiper-item>
		                       
		                    </swiper>

		<!-- 菜单 -->
		<view class="menu_main">
			<Menu v-for="item,index in iconList" :menuItem="item" v-block></Menu>
		</view>

		<!-- 查看全部指示 -->
		<view class="title">
			<text>为您推荐</text>
			<view class="skip" @click="clickSkip">
				<text @click="clickSkip">查看全部</text>
				<image class="right_icon" src="../../static/buttonSource/right_black.png" mode="" @click="clickSkip">
				</image>
			</view>
		</view>

		<view class="list">
			<CardItem v-for="item in cardList" :cardItem="item"></CardItem>
		</view>

	</view>
</template>

<script>
	import Menu from "@/components/Menus.vue"
	import CardItem from "@/components/CardItem.vue"
	export default {
		name: "index",
		comments: {
			Menu,
			CardItem
		},
		data() {
			return {
				cardList: [],
				banner: [],
				iconList:[]
			}
		},
		methods: {
			focusSearch: function() {
				console.log("focusSearch")
				uni.navigateTo({
					url: "../SearchPage/SearchPage",
					fail: (err) => {
						console.log(err, 'err')
					}
				})
			},
			blur: function() {
				console.log("blur")
				this.value = ''
			},
			cancel: function() {
				console.log("cancel")
			},
			input: function(e) {
				console.log(e, 'eee')
			},
			getMenuList(){
					uni.showLoading();
					this.$api.getIcon().then(
							(res) => {
								if (res?.code === '200' && res?.data.length > 0) {
									this.iconList = res?.data
								}
							}
						)
						.finally(() => {
							uni.hideLoading();
						})
				
			},
			// 获取推荐列表
			getClassList: function() {
				uni.showLoading();
				this.$api.queryClass({
						userId: uni.getStorageSync('userInfo').id
					}).then(
						(res) => {
							if (res?.code === '200' && res?.data.length > 0) {
								this.cardList = res.data.map(item => {
									return {
										...item,
										banner: item.imageUrl,
										dec: item.introduction,
										sale: item.price,
										count: item.participants
									}
								})
							}
						}
					)
					.finally(() => {
						uni.hideLoading();
					})
			},
			// 获取壁纸
			getBanner: function() {
				uni.showLoading();
				this.$api.queryBanner().then(
						(res) => {
							if (res?.code === '200' && res?.data.length > 0) {
								this.banner = res?.data
							}
						}
					)
					.finally(() => {
						uni.hideLoading();
					})
			}
		},
		mounted() {
			this.getClassList();
			this.getMenuList()
			this.getBanner();
		}
	}
</script>

<style>
	.main {
		width: 100%;
		position: relative;
	}

	.search_main {
		width: 90%;
		margin: auto;
		display: flex;
		justify-content: space-between;
		position: relative;
		height: 50rpx;
		margin-top: 30rpx;
	}

	.search_main>.search {
		z-index: 100;
		width: 95%;
		height: 100%;
		background-color: #FFFFFF;
		border-radius: 30rpx 30rpx;
		color: #8f9199;
		padding-left: 30rpx;
	}

	.search_main>.scan {
		z-index: 100;
		height: 100%;
		width: 5%;
		margin-left: 10rpx;
		margin-top: 5rpx;
	}

	.background_img {
		position: absolute;
		width: 100%;
		top: 0;
		height: 380rpx;
		background-repeat: no-repeat;
		ackground-size: cover;
		background-position: center center;
	}

	.menu_main {
		position: absolute;
		width: 90%;
		height: 280rpx;
		top: 300rpx;
		left: 50%;
		transform: translateX(-50%);
		background-color: #FFFFFF;
		z-index: 100;
		/* border: 1px solid #000000; */
		border-radius: 12rpx 12rpx;
		box-shadow: 3rpx 3rpx 10rpx 5px rgba(0, 0, 0, .1);

		display: grid;
		grid-template-columns: repeat(5, 19%);
		grid-row-gap: 10rpx;
		grid-column-gap: 10rpx;
		padding: 20rpx;
	}

	.show_more {
		width: 90%;
		margin: auto;
		height: 100rpx;
	}

	.title {
		position: absolute;
		top: 700rpx;
		width: 90%;
		height: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		justify-content: space-between;
	}

	.title>text {
		color: #222222;
		font-size: 16px;
		font-weight: 700;
	}

	.title>.skip {
		color: #8f9199;
		width: 120rpx;
		display: flex;
		position: relative;
	}

	.skip>text {
		font-size: 12px;
		line-height: 50rpx;
	}

	.skip>.right_icon {
		position: absolute;
		display: table-cell;
		height: 30%;
		width: 10rpx;
		right: 0rpx;
		top: 35%;
	}

	.list {
		position: absolute;
		top: 730rpx;
		width: 100%;
		padding: 0 10rpx;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: repeat(2, 44%);
		grid-row-gap: 20rpx;
		grid-column-gap: 50rpx;
		padding: 20rpx;

	}
</style>
